<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lesson 5. The Function Keyword.</title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="js/AC_RunActiveContent.js" language="javascript"></script>
<script src="js/js_functions.js" language="javascript"></script>

<!--[if !IE 7]>
	<style type="text/css">
		#wrapper {display:table;height:100%}
	</style>
<![endif]-->

</head>

<body>
	
	<div id="wrapper">

		<div id="header">
			<img src="img/logo-small.png" alt="logo" />
			<h1 class="leftBorderWhite">Lesson 5. The Function Keyword.</h1>
		</div>
		
		<div id="main">
			<h2>In this example you will learn about how to use the <code>function</code> keyword.</h2>
			<div class="content">
				The <code>function</code> keyword is used to call functions that return a value.
				<br/><br/>
				As we've seen in <a href="Lesson2.html">Lesson 2. The Basics.</a> calling a method is quite simple. 
				However, in that example the method called did not return a value. But what if you need to retrieve the value 
				of a function and assign it to a variable? In that case you must use the <code>function</code> keyword.
			</div>
		
			<div class="container">
				<span class="title">
					The result will display a <code>flash.text.TextField</code> on the <code>stage</code> with the text "[object TextField]".
				</span>
				<div class="example">
					<h3>AS3:</h3>
					<img src="img/Function-AS3.png" />
				</div>
				<div class="example">
					<h3>FXML:</h3><br/>
					<img src="img/Function-XML.png" />
					<div class="right"><a href="examples/Function.xml" target="_blank">source</a></div>
				</div>
				<div class="example">
					<h3>FXML Result: </h3>
					<div id="Function">
						<script language="javascript">
							if (AC_FL_RunContent == 0) {
								alert("This page requires AC_RunActiveContent.js.");
							} else {
								AC_FL_RunContent(
									'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
									'src', 'swf/org.fxml.Application',
									'width', '100%',
									'height', '20',
									'quality', 'high',
									'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
									'align', 'middle',
									'play', 'true',
									'loop', 'true',
									'scale', 'noScale',
									'wmode', 'transparent',
									'devicefont', 'false',
									'id', 'Function',
									'bgcolor', '#c81b1b',
									'name', 'Function',
									'menu', 'true',
									'allowFullScreen', 'false',
									'allowScriptAccess','sameDomain',
									'movie', 'swf/org.fxml.Application',
									'salign', 'lT',
									'flashVars', 'id=fxm/l&configFile=examples/Function.xml'
									); //end AC code
							}
						</script>
					</div>
				</div>
			</div>
			
			<div class="content">
				In the example above we call the method <code>toString</code> on the object <code>flash.text.TextField</code>, 
				the value is returned to the property <code>text</code> on the object <code>flash.text.TextField</code>. 
				<br/><br/>
				As we've seen in <a href="Lesson4.html">Lesson 4. The Instance Keyword.</a> we learned about the <code>this</code> keyword. 
				The same rules apply when using the <code>function</code> keyword when targeting the desired scope. 
				Avoiding the use of <code>this</code> will call a method on the object that is being created. This can be seen in the example above.
				<br/><br/>
				In the example below, we'll see how adding the keyword <code>this</code> will impact the result of the method call.
			</div>
			
			<div class="container">
				<span class="title">
					The result will display a <code>flash.text.TextField</code> on the <code>stage</code> with the text "[object Application]".
				</span>
				<div class="example">
					<h3>AS3:</h3>
					<img src="img/FunctionAndThis-AS3.png" />
				</div>
				<div class="example">
					<h3>FXML:</h3><br/>
					<img src="img/FunctionAndThis-XML.png" />
					<div class="right"><a href="examples/FunctionAndThis.xml" target="_blank">source</a></div>
				</div>
				<div class="example">
					<h3>FXML Result:</h3>
					<div id="FunctionAndThis">
						<script language="javascript">
							if (AC_FL_RunContent == 0) {
								alert("This page requires AC_RunActiveContent.js.");
							} else {
								AC_FL_RunContent(
									'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
									'src', 'swf/org.fxml.Application',
									'width', '100%',
									'height', '20',
									'quality', 'high',
									'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
									'align', 'middle',
									'play', 'true',
									'loop', 'true',
									'scale', 'noScale',
									'wmode', 'transparent',
									'devicefont', 'false',
									'id', 'FunctionAndThis',
									'bgcolor', '#c81b1b',
									'name', 'FunctionAndThis',
									'menu', 'true',
									'allowFullScreen', 'false',
									'allowScriptAccess','sameDomain',
									'movie', 'swf/org.fxml.Application',
									'salign', 'lT',
									'flashVars', 'id=fxm/l&configFile=examples/FunctionAndThis.xml'
									); //end AC code
							}
						</script>
					</div>
				</div>
			</div>
			
			<div class="content">
				Just as we learned in Lesson 2, we can pass parameters to functions. 
				The syntax is the same when using the <code>function</code> keyword.
			</div>
			
			<div class="container">
				<span class="title">Function with parameters example.</span>
				<div class="example">
					<h3>FXML:</h3>
					<img src="img/FunctionAndParameters-XML.png" />
					<div class="right"><a href="examples/FunctionAndParameters.xml" target="_blank">source</a></div>
				</div>
				<div class="example">
					<h3>FXML Result:</h3>
					<div id="FunctionAndParameters">
						<script language="javascript">
							if (AC_FL_RunContent == 0) {
								alert("This page requires AC_RunActiveContent.js.");
							} else {
								AC_FL_RunContent(
									'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
									'src', 'swf/org.fxml.Application',
									'width', '100%',
									'height', '40',
									'quality', 'high',
									'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
									'align', 'middle',
									'play', 'true',
									'loop', 'true',
									'scale', 'noScale',
									'wmode', 'transparent',
									'devicefont', 'false',
									'id', 'FunctionAndParameters',
									'bgcolor', '#c81b1b',
									'name', 'FunctionAndParameters',
									'menu', 'true',
									'allowFullScreen', 'false',
									'allowScriptAccess','sameDomain',
									'movie', 'swf/org.fxml.Application',
									'salign', 'lT',
									'flashVars', 'id=fxm/l&configFile=examples/FunctionAndParameters.xml'
									); //end AC code
							}
						</script>
					</div>
				</div>
			</div>
			
			<div class="content">
				In the example above, we have created two <code>flash.text.TextFields</code> and assigned names "textField1" 
				and "textField2" respectively.  During the creation of the second <code>flash.text.TextField</code> we target the 
				first and call the method <code>getLineLength</code>. This method requires the index of the line you with to retrieve 
				the length of. The function is called and the result is returned to the <code>text</code> property on the second 
				<code>flash.text.TextField</code>.
			</div>
			
			<div class="paging">
				<a  href="Lesson6.html"><b>Lesson 6. More Keywords.</b> <img class="arrow" src="img/arrow.jpg" /></a>
			</div>
		</div>
	</div>
	
	<div id="footer">
		<div>FXML is an open source project and is not affiliated with Adobe.</div>
	</div>
	
</body>
</html>
